<template>
	<view>
		<view class="u-page">
			<view class="gradepick" style="margin: 15px;">
				<u-button type="primary" :plain="true" text="选择年级" style="width: 60px;height: 30px;" @click="pickYear">
				</u-button>
				<p align="center">{{gradePick.grade}}</p>
				<u-picker :show="gradePick.show" :columns="gradePick.columns" @confirm="getGradeValue"
					@cancel="closePicker"></u-picker>
			</view>
			<view class="majorpick" style="margin: 15px;">
				<u-button type="primary" :plain="true" text="选择专业" style="width: 60px;height: 30px;" @click="pickMajor">
				</u-button>
				<p align="center">{{majorPick.major}}</p>
				<u-picker :show="majorPick.show" :columns="majorPick.columns" @confirm="getMajorValue"
					@cancel="closePicker"></u-picker>
			</view>
			<view class="classpick" style="margin: 15px;">
				<u-button type="primary" :plain="true" text="选择班级" style="width: 60px;height: 30px;" @click="pickClass">
				</u-button>
				<p align="center">{{classPick.classes}}</p>
				<u-picker :show="classPick.show" :columns="classPick.columns" @confirm="getClassValue"
					@cancel="closePicker"></u-picker>
			</view>
			<view class="datepick" style="margin: 15px;">
				<u-button type="primary" :plain="true" text="选择时间" style="width: 60px;height: 30px;" @click="pickDate">
				</u-button>
				{{datePick.valueData}}
				<u-datetime-picker ref="datetimePicker" :show="datePick.show" mode="date" @cancel="closePicker"
					@confirm="getDateValue"></u-datetime-picker>
			</view>
		</view>
		<u-divider text="分析详情"></u-divider>
		<view class="analysis">
			<h4 align="center" style="margin-bottom: 5px;">2019级&nbsp;&nbsp; 2022年3月1日</h4>
			<canvas canvas-id="HcUPPFhEUcORqJtkhzAeanKkDVtzpRop" id="HcUPPFhEUcORqJtkhzAeanKkDVtzpRop" class="charts"
				@touchend="tap" />
			<view class="linethree">
				<canvas canvas-id="SFOVuZQUHDiJaldlyFDxzZnwxlRmJWYi" id="SFOVuZQUHDiJaldlyFDxzZnwxlRmJWYi"
					class="lineCharts" @touchend="tap" />
			</view>
			<view class="word">
				<h4>详情</h4>
				<p style="margin: 5px;">　　一直以来，我将政治理论学习当成生活必修课，我深知理论上的成熟是政治上成熟的基础，政治上的清醒来源于理论上的坚定。
				因此，我充分利用业务时间不断加强党史、马克思主义理论的学习，尤其是深入学习，坚持用科学理论武装头脑、指导实践。
				通过学习，我更加深刻地理解对马克思主义的信仰，对社会主义和共产主义的信念，是共产党人的政治灵魂。
				作为党员，时刻不能忘记我们党是“从哪里走来的”，牢记血脉根源，不忘入党初心，在党爱党，在党为党，坚定不移地沿着中国特色社会主义道路前行。</p>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/qiun-data-charts_2.4.3-20220505/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				gradePick: {
					show: false,
					grade: '2019',
					columns: [
						['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022']
					]
				},
				majorPick: {
					show: false,
					major: '全部',
					columns: [
						['临床', '麻醉', '消化', '呼吸']
					]
				},
				classPick: {
					show: false,
					classes: '全部',
					columns: [
						['1班', '2班', '3班', '4班']
					]
				},
				datePick: {
					show: false,
					// valueDate: Number(new Date())
					valueData: '全部'
				}
			}
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			this.getLineData();
		},
		methods: {
			getGradeValue(e) {
				// console.log(e)
				this.gradePick.grade = e.value[0]
				this.gradePick.show = false
			},
			getMajorValue(e) {
				this.majorPick.major = e.value[0]
				this.majorPick.show = false
			},
			getClassValue(e) {
				this.classPick.classes = e.value[0]
				this.classPick.show = false
			},
			getDateValue(e) {
				let year = new Date(e.value).getFullYear()
				let month1 = new Date(e.value).getMonth()
				let month = month1 + 1
				// console.log(month+1)
				let day = new Date(e.value).getDate()
				this.datePick.valueData = year + '-' + month + '-' + day
				// console.log(this.datePick.valueData)

				this.datePick.show = false
			},
			closePicker() {
				this.gradePick.show = false
				this.majorPick.show = false
				this.classPick.show = false
				this.datePick.show = false
			},
			pickYear() {
				this.gradePick.show = true
			},
			pickMajor() {
				this.majorPick.show = true
			},
			pickClass() {
				this.classPick.show = true
			},
			pickDate() {
				this.datePick.show = true
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// 饼状图
					let res = {
						series: [{
							data: [{
								"name": "一级",
								"value": 10
							}, {
								"name": "二级",
								"value": 30
							}, {
								"name": "三级",
								"value": 50
							}]
						}]
					};
					this.drawCharts('HcUPPFhEUcORqJtkhzAeanKkDVtzpRop', res);
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "pie",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#DD524D", "#FC8452", "#73C0DE"],
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				});
			},
			getLineData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2021-01", "2021-02", "2021-03", "2021-04", "2021-05", "2021-06"],
						series: [{
								name: "一级预警",
								data: [5, 8, 2, 3, 4, 2]
							},
							{
								name: "二级预警",
								data: [10, 13, 12, 25, 18, 20]
							},
							{
								name: "三级预警",
								data: [20, 35, 30, 40, 45, 39]
							}
						]
				 };
					this.drawChartsLine('SFOVuZQUHDiJaldlyFDxzZnwxlRmJWYi', res);
				}, 500);
			},
			drawChartsLine(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "line",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
			 	background: "#FFFFFF",
					color: ["#DD524D", "#FC8452", "#73C0DE"],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}

	}
</script>

<style>
	.u-page {
		display: flex;
	}

	.charts {
		width: 750rpx;
		height: 500rpx;
	}
	.lineCharts {
		width: 750rpx;
		height: 500rpx;
	}
</style>
